<template>
	<view class="container">
		<view class="user">
			<view class="content">
				<view class="label">姓名</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入姓名" v-model="formData.name" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">身份证号</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.idcard" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">出生年月</view>
				<view class="value" @click="selectToggle">
					<input placeholder="请选择" disabled v-model="formData.birthday"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">居住地省市区</view>
				<view class="value" @click="regionToggle">
					<input placeholder="请选择" disabled v-model="formData.city"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">联系电话</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.mobile" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">紧急联系人</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.contact" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">紧急联系电话</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.contacttel" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">学历</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.education" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">毕业院校</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.school" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">入学时间</view>
				<view class="value" @click="selectToggle1">
					<input placeholder="请选择" disabled v-model="formData.cometime"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">毕业时间</view>

				<view class="value" @click="selectToggle2">
					<input placeholder="请选择" disabled v-model="formData.graduatetime"></input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="label">专业</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.major" />
					<!-- <u-icon name="arrow-right" /> -->
				</view>
			</view>
			<view class="content">
				<view class="label">身高</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.height" />
					<view style="color: #999;">cm</view>
				</view>
			</view>
			<view class="content">
				<view class="label">体重</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.weight" />
					<view style="color: #999;">kg</view>
				</view>
			</view>
			<view class="content">
				<view class="label">鞋码</view>
				<view class="value">
					<input class="nickname-input" placeholder="请输入" v-model="formData.shoesize" />
					<view style="color: #999;">码</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" @click="save">立即提交</u-button>
		</view>
	</view>
	<u-picker mode="region" v-model="state.regionShow" @confirm="regionChange"></u-picker>
	<u-picker v-model="state.dateShow" mode="time" @confirm="dateChange"></u-picker>
	<u-picker v-model="state.dateShow1" mode="time" @confirm="dateChange1"></u-picker>
	<u-picker v-model="state.dateShow2" mode="time" @confirm="dateChange2"></u-picker>
	<Tabbar :value="-1" />
</template>

<script setup lang="ts">
	// import dayjs from 'dayjs';
	import Tabbar from '@/components/tabbar.vue'
	import { reactive } from 'vue';
	import { userIndex, userProfile } from '@/common/api'
	import { onLoad } from '@dcloudio/uni-app'
	const state = reactive({
		sexShow: false,
		dateShow: false,
		dateShow1: false,
		dateShow2: false,
		regionShow: false,
	})
	const regionToggle = () => {
		state.regionShow = !state.regionShow
	}
	const regionChange = (e) => {
		console.log(e)
		formData.city = `${e.province.name},${e.city.name},${e.area.name}`
	}
	const selectToggle = () => {
		state.dateShow = !state.dateShow
	}
	const dateChange = (e) => {
		formData.birthday = `${e.year}-${e.month}-${e.day}`
		state.dateShow = !state.dateShow
	}
	const selectToggle1 = () => {
		state.dateShow1 = !state.dateShow1
	}
	const dateChange1 = (e) => {
		formData.cometime = `${e.year}-${e.month}-${e.day}`
		selectToggle1()
	}
	const selectToggle2 = () => {
		state.dateShow2 = !state.dateShow2
	}
	const dateChange2 = (e) => {
		formData.graduatetime = `${e.year}-${e.month}-${e.day}`
		selectToggle2()
	}
	const formData = reactive({
		name: '',
		idcard: '',
		birthday: '',
		birthplace: '',
		city: '',
		address: '',
		contact: '',
		contacttel: '',
		education: '',
		school: '',
		cometime: '',
		graduatetime: '',
		mobile: '',
		major: '',
		height: '',
		weight: '',
		shoesize: '',
	})
	onLoad(() => {
		// formData.date = dayjs().add(-18, 'year').format('YYYY-MM-DD')
		getInfo()
	})
	const getInfo = async () => {
		const { data } = await userIndex()
		console.log(data)
		if (data.user) {
			for (let i in formData) {
				formData[i] = data.user[i]
			}
		}
	}
	const save = async () => {
		const data = await userProfile(formData)
		if (data.code == 1) {
			uni.showToast({
				title: `修改成功！`,
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: `修改失败！`,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		padding: 20rpx 35rpx 200rpx;
		box-sizing: border-box;
		overflow: auto;

		.btn {
			width: 160rpx;
			margin: 0 auto;
			padding-top: 40rpx;
		}

		.user {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx;
			// height: 425rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;
		}

		.title {
			font-size: 32rpx;
			color: #282828;
			display: flex;
			align-items: center;
			padding: 25rpx 20rpx 25rpx;

			&::before {
				content: ' ';
				display: block;
				height: 32rpx;
				width: 8rpx;
				background-color: #3D69FE;
				margin-right: 10rpx;
			}
		}

		.pop_image {
			text-align: right;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 0;
			padding: 0;
			background-color: transparent !important;
			border: 0 !important;
			outline: 0;

			image {
				width: 120rpx;
				height: 120rpx;
				margin: 0;
				padding: 0;
			}

			&::after {
				border: none;
			}
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;

			.label {
				height: 64rpx;
				line-height: 64rpx;

				text {
					color: #ED0909;
				}
			}

			.value {
				text-align: right;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				input {
					border: 0;
					height: 64rpx;
				}

				:deep().u-upload {
					>view {
						justify-content: flex-end;
					}
				}


			}

			.values {
				text-align: left;
				flex-direction: column;
				align-items: flex-start;

				textarea {
					border: 2rpx solid #282828;
					margin-top: 20rpx;
					border-radius: 8rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.yinpin {
			width: 100%;
			background: #fff;
			padding: 28rpx 30rpx;
			// height: 456rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 4rpx 6rpx -1px, rgba(0, 0, 0, 0.06) 0rpx 2rpx 4rpx -1rpx;
			border-radius: 8rpx;

		}

		.upload_box {
			padding-left: 50rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #282828;

			&_title {
				padding: 12rpx 0;

				text {
					color: #ED0909;
				}
			}

			:deep().u-list-item {
				background-color: #fff;
				border: 2rpx solid #282828;
				margin: 0;
			}
		}
	}
</style>